<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="竞赛名称:">
            <el-input size="small" clearable v-model="competitionPrize.name" placeholder="请输入竞赛名称"
                      prefix-icon="el-icon-edit"/>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="竞赛级别:">
            <el-select v-model="competitionPrize.level" placeholder="请选择" size="small">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="竞赛奖项:">
            <el-input size="small" clearable v-model="competitionPrize.prize" placeholder="如：校级一等奖"
                      prefix-icon="el-icon-edit"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="团队成员:">
            <el-input size="small" clearable v-model="competitionPrize.members" placeholder="有多个成员直接输入"
                      prefix-icon="el-icon-edit"/>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="指导教师:">
            <el-input size="small" clearable v-model="competitionPrize.teacher" placeholder="如：李丹"
                      prefix-icon="el-icon-edit"/>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="display: flex">
          <el-form-item label="竞赛时间:">
            <el-input size="small" clearable v-model="competitionPrize.time" placeholder="如：2020.05"
                      prefix-icon="el-icon-edit"/>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row style="display: flex; justify-content: center">
      <el-button type="primary" @click="handleCompetitionPrizeAddBtn">提交</el-button>
      <el-button type="warning" @click="handleCompetitionPrizeResetBtn">清空</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "AddCompetitionPrize",
  // 接受父类传过来的urls
  props: {
    fileList: {
      Type: Array,
      default: () => {
        return [];
      }
    },
    urls: {
      Type: Array,
      default: () => {
        return [];
      }
    },
    userId: 0
  },
  data() {
    return {
      /**
       * 竞赛奖励
       */
      competitionPrize: {
        name: '',
        userId: '',
        level: '',
        prize: '',
        members: '',
        teacher: '',
        time: '',
        url: '',
      },
      options: [{
        value: '校级',
        label: '校级'
      }, {
        value: '省级',
        label: '省级'
      }, {
        value: '国家级',
        label: '国家级'
      }],
    }
  },
  methods: {
    /**
     * 点击竞赛奖励的提交按钮触发事件
     **/
    handleCompetitionPrizeAddBtn() {
      // 上传了图片但是没保存，提示用户保存
      if(this.fileList.length != 0 && this.urls.length === 0) {
        this.$message({
          message: '图片未保存，请先保存哦',
          type: 'warning'
        });
      } else {
        this.$confirm('确定要提交吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.competitionPrize.userId = this.userId;
          this.competitionPrize.url = this.urls.join(";");
          this.postRequest("/studentInfo/competitionPrize", this.competitionPrize);
          this.competitionPrize = {};
          this.$emit('clearUrl');
        });
      }
    },
    /**
     * 点击竞赛奖励的取消按钮触发事件
     **/
    handleCompetitionPrizeResetBtn() {
      this.competitionPrize = {};
    },
  }
}
</script>

<style scoped>

</style>